<!--
 * @Author: byron
 * @Date: 2021-09-23 20:48:17
 * @LastEditTime: 2021-10-06 12:27:45
-->
<template>
    <div class="mvs" ref="mvPage">
        <div class="mv-top">
            <div class="tabs-warp">
                <span class="tab-title">
                    地区:
                </span>
                <Tabs
                    :tabs="areaTabs"
                    tabClass="mvClass"
                    @tabChange="tabChangeArea"
                    v-model="areaIndex"
                />
            </div>
            <div class="tabs-warp">
                <span class="tab-title">
                    类型:
                </span>
                <Tabs :tabs="typeTabs" tabClass="mvClass" v-model="typeIndex" />
            </div>
            <div class="tabs-warp">
                <span class="tab-title">
                    排序:
                </span>
                <Tabs
                    :tabs="orderTabs"
                    tabClass="mvClass"
                    v-model="orderIndex"
                />
            </div>
        </div>
        <div class="mv-show-warp">
            <WithPagiation
                ref="WithPagiationRef"
                :getData="getAllMv"
                @getDataSuccess="getDataSuccess"
                :getDataParams="getDataParams"
                :total="count"
                :scrollTarget="scrollTarget"
            >
                <div class="list-warp">
                    <MvCard
                        v-for="(item, index) in mvs"
                        :key="index"
                        :img="item.cover"
                        :name="item.name"
                        :author="item.artistName"
                        :playCount="item.playCount"
                        :id="item.id"
                        class="list-item"
                    />
                </div>
            </WithPagiation>
        </div>
    </div>
</template>

<script>
import WithPagiation from '@/components/with-pagination.vue'
import { getAllMvs } from '@/api'
const areaTabs = ['全部', '内地', '港台', '欧美', '日本', '韩国']
const typeTabs = ['全部', '官方版', '原声', '现场版', '网易出品']
const orderTabs = ['上升最快', '最热', '最新']
export default {
    components: { WithPagiation },
    props: {},
    data() {
        return {
            mvs: [],
            areaIndex: 0,
            typeIndex: 0,
            orderIndex: 0,
            scrollTarget: '',
            count: 0,
        }
    },
    watch: {},
    computed: {
        getDataParams() {
            return {
                area: areaTabs[this.areaIndex],
                type: typeTabs[this.typeIndex],
                order: orderTabs[this.orderIndex],
            }
        },
    },
    methods: {
        getDataSuccess(result) {
            const { data, count } = result
            this.mvs = data
            if (count) {
                this.count = count
            }
        },
    },
    created() {
        this.areaTabs = areaTabs
        this.typeTabs = typeTabs
        this.orderTabs = orderTabs
        this.getAllMv = getAllMvs

        // this.$nextTick(() => {
        // })
    },
    mounted() {
        this.scrollTarget = this.$refs && this.$refs.mvPage
    },
}
</script>
<style lang="less" scoped>
.tabs-warp {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.list-warp {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -14px;
    margin-top: 18px;

    .list-item {
        width: 25%;
        padding: 0px 14px;
        margin-bottom: 30px;
    }
}
</style>
